<template>
  <div>
    <card>
      <p class="close" slot="extra" @click="showChange('navTops')">
        <Icon type="md-close"/>
      </p>
      <p slot="title">头部导航管理</p>
      <table>
        <thead>
          <td v-for="(item, index) in thead" :key="index">{{item}}</td>
        </thead>
        <tbody>
          <tr v-for="(item, index) in navTops" :key="index">
            <td>
              <span v-if="!item.show">{{item.name}}</span>
              <input v-else v-model="item.name" />
            </td>
            <td>
              <span v-if="!item.show">{{item.link}}</span>
              <input v-else v-model="item.link" />
            </td>
            <td>
              <span v-if="!item.show">{{item.sort}}</span>
              <input v-else v-model="item.sort" />
            </td>
            <td>
              <div v-if="!item.show" class="bt"  @click.stop='show(index)'>编辑</div>
              <div v-else class="bt"  @click.stop='done(index)'>完成</div>
            </td>
          </tr>
        </tbody>
      </table>
      <!-- <Button type="info" @click>修改</Button> -->
    </card>
  </div>
</template>

<script>
export default {
  props: ['showChange', 'setChange'],
  data() {
    return {
      thead:['名称','链接','顺序','操作'],
      navTops: null,
    }
  },
  beforeMount(){
    let navTops = this.$store.state.navtops
    navTops = navTops.map(function(item) {
      item.show = false
      return item
    })
    this.navTops = navTops
  },
  methods: {
    show:function(index){
      this.navTops[index].show = true
      this.$forceUpdate()
    },
    done:function(index) {
      this.navTops[index].show = false
      this.$forceUpdate()
      this.setChange('/api/navTops',this.navTops[index])
    }
  },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
table {
  td {
    width: 100px;
    height: 45px;
    input {
      width: 80px;
      text-align: center;
      outline: none;
    }
  }
}
.bt {
  width: 80px;
  padding: 5px 15px;
  border-radius: 5px;
  margin-left: 10px;
  color: #fff;
  background-color: #2db7f5;
  cursor: pointer;
  &:hover{
    background-color: #57c5f7;
  }
}
</style>
